<script lang="ts" setup>
import AccountApi from '~/src/api/AccountApi';


const form = reactive<Record<any, any>>({})

const rules = {
    companyType: [
        { required: true, message: '请选择公司类型', trigger: 'blur' }
    ],
    companyName: [
        { required: true, message: '请填写公司', trigger: 'blur' }
    ],
}
const formRef = useTemplateRef("formRef")
const companyList = ref([])

onMounted(async ()=>{
    const res = await AccountApi.getCompanyTypeList()
    if (res) {
        const { data: {records: data} } = res
        companyList.value = data.map(x=>({
            label: x.name,
            value: x.type
        }))
        console.log("companyTypeList res", data)
    }
})
const confirm = () => {
    formRef.value.validate((validate: boolean) => {
        if (validate) {
            emit('callBack', form)
        }
    })

}
const cancel = () => {
    emit('callBack')
}
const emit = defineEmits(['callBack'])

</script>

<template>
    <el-form :rules="rules" ref="formRef" :model="form">
        <el-form-item label="公司类型" label-width="80px" prop="companyType">
            <SingleLayerSelect v-model="form.companyType" :options="companyList" placeholder="请选择公司类型" />
        </el-form-item>
        <el-form-item label="公司名称" label-width="80px" prop="companyId">
            <el-input v-model="form.companyName" placehoder="请填写公司名称"></el-input>
        </el-form-item>
    </el-form>
    <div style="padding-top: 20px;text-align: right">
        <el-button @click="confirm" type="primary">确认</el-button>
        <el-button @click="cancel">取消</el-button>
    </div>
</template>